<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		
		<div id="app">
			
			学生成绩:<input type="text" v-model="score" /><br />
			{{score}}<br />
			{{message}}
			{{result}}
		</div>
		
		<script>
			var app = Vue.createApp({
				data(){
					return {
						"message":"Hello World!",
						"score":0,
						"result":""
					}
				},
				watch:{
					score(newVal,oldVal){
						console.log(newVal);
						if(newVal>=90)
						{
							this.result="优"
						}
					    else if(newVal>=80)
					    {
						  this.result="良"
					   }
					   else if(newVal>=60){
						   this.result="中"
					   }
					   else{
						   this.result="下"
						   }
					   
					}
				}
			});
			var vm = app.mount("#app")
		</script>
	</body>
</html>